<template>
  <div class="page-home">
    <!-- 订单商品栏 -->
    <div class="order-all-num">
      <div
        class="wait-payment-num order-num-item"
        @click="toOrderPage(1)"
      >
        <div class="item-box">
          <div class="words">
            {{ $t('home.pendingOrders') }}
          </div>
          <div class="number">
            {{ isTrueData(orderStateCount.unPay) }}
          </div>
        </div>
        <div class="item-img">
          <img
            src="~@/assets/img/home/pendingPayment.png"
            alt=""
          >
        </div>
      </div>
      <div
        class="wait-delivery-num order-num-item"
        @click="toOrderPage(2)"
      >
        <div class="item-box">
          <div class="words">
            {{ $t('chat.pendingDelivery') }}
          </div>
          <div class="number">
            {{ isTrueData(orderStateCount.payed) }}
          </div>
        </div>
        <div class="item-img">
          <img
            src="~@/assets/img/home/pendingDelivery.png"
            alt=""
          >
        </div>
      </div>
      <div
        class="wait-receiving-goods-num order-num-item"
        @click="toOrderPage(3)"
      >
        <div class="item-box">
          <div class="words">
            {{ $t('chat.pendingReceipt') }}
          </div>
          <div class="number">
            {{ isTrueData(orderStateCount.consignment) }}
          </div>
        </div>
        <div class="item-img">
          <img
            src="~@/assets/img/home/afterSale.png"
            alt=""
          >
        </div>
      </div>
      <div
        class="wait-evaluate-num order-num-item"
        @click="toOrderPage(5)"
      >
        <div class="item-box">
          <div class="words">
            {{ $t('chat.completed') }}
          </div>
          <div class="number">
            {{ isTrueData(orderStateCount.success) }}
          </div>
        </div>
        <div class="item-img">
          <img
            src="~@/assets/img/home/pendingReview.png"
            alt=""
          >
        </div>
      </div>
      <div
        class="wait-after-sales-num order-num-item"
        @click="toRefundOrderPage()"
      >
        <div class="item-box">
          <div class="words">
            {{ $t('order.reimburse') }}/{{ $t('order.afterSale') }}
          </div>
          <div class="number">
            {{ isTrueData(orderStateCount.refund) }}
          </div>
        </div>
        <div class="item-img">
          <img
            src="~@/assets/img/home/totalOrderAmount.png"
            alt=""
          >
        </div>
      </div>
      <div
        class="wait-stock-num order-num-item"
        @click="toStockPage(1)"
      >
        <div class="item-box">
          <div class="words">
            {{ $t('product.stockWarning') }}
          </div>
          <div class="number">
            {{ isTrueData(stockWarningCount) }}
          </div>
        </div>
        <div class="item-img">
          <img
            src="~@/assets/img/home/stockWarning.png"
            alt=""
          >
        </div>
      </div>
    </div>

    <!-- 实时概况板块 -->
    <div class="realtime-situation">
      <div class="realtime">
        <div class="realtime-left">
          <div class="title">
            <div class="t-title">
              {{ $t('home.realTimeData') }}
            </div>
            <span class="title-time">{{ $t('home.updateTime') }}：{{ nowDate }}
              <span>{{ nowTime }}</span></span>
            <div class="t-explain-item t-explain-first-item t-small-text t-today-data">
              {{ $t('home.dataTodayActualTotal') }}
            </div>
            <div class="t-explain-item t-explain-second-item t-small-text t-yesterday-data">
              {{ $t('home.dataYesterdayActualTotal') }}
            </div>
          </div>
          <!-- 图表 -->
          <div class="realtime-chart-box">
            <common-chart
              v-if="realTimeDataChart.show"
              :options="realTimeDataChart.options"
              style="width: 100%; height: 250px"
            />
          </div>
          <!-- /图表 -->
        </div>

        <!-- 数据统计 -->
        <div class="realtime-right">
          <div class="realtime-right-title">
            {{ $t('home.statistics') }}
          </div>

          <!-- 内容 -->
          <div class="realtime-right-box">
            <div class="realtime-right-box-left">
              <div class="payCustomers order-num-item">
                <div class="item-img">
                  <img
                    src="~@/assets/img/home/payCustomers.png"
                    alt=""
                  >
                </div>
                <div class="item-box">
                  <div class="words">
                    {{ $t('home.payCustomers') }}
                  </div>
                  <div class="number">
                    {{ isTrueData(dataInfo.payUserCount) }}
                  </div>
                  <div class="seq">
                    <span class="value">{{ dataInfo.yesterdayPayUserRate >= 0 ? '+' : ''
                    }}{{ dataFormat(isTrueData(dataInfo.yesterdayPayUserRate)) }}%</span>
                    <span class="compare grap">{{ $t('home.sameAsYesterday') }}</span>
                  </div>
                </div>
              </div>
              <div class="payCount order-num-item">
                <div class="item-img">
                  <img
                    src="~@/assets/img/home/payCount.png"
                    alt=""
                  >
                </div>
                <div class="item-box">
                  <div class="words">
                    {{ $t('home.payCount') }}
                  </div>
                  <div class="number">
                    {{ isTrueData(dataInfo.payOrderCount) }}
                  </div>
                  <div class="seq">
                    <span class="value">{{ dataInfo.yesterdayPayOrderRate >= 0 ? '+' : ''
                    }}{{ dataFormat(isTrueData(dataInfo.yesterdayPayOrderRate)) }}%</span>
                    <span class="compare grap">{{ $t('home.sameAsYesterday') }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="realtime-right-box-right">
              <div class="refundAmount order-num-item">
                <div class="item-img">
                  <img
                    src="~@/assets/img/home/refundAmount.png"
                    alt=""
                  >
                </div>
                <div class="item-box">
                  <div class="words">
                    {{ $t('order.refundAmount') }}{{ $t('home.yuan') }}
                  </div>
                  <div class="number">
                    {{ isTrueData(dataInfo.refund) }}
                  </div>
                  <div class="seq">
                    <span class="value">{{ dataInfo.yesterdayRefundRate >= 0 ? '+' : ''
                    }}{{ dataFormat(isTrueData(dataInfo.yesterdayRefundRate)) }}%</span>
                    <span class="compare grap">{{ $t('home.sameAsYesterday') }}</span>
                  </div>
                </div>
              </div>
              <div class="pendingReview order-num-item">
                <div class="item-img">
                  <img
                    src="~@/assets/img/home/customerPrice.png"
                    alt=""
                  >
                </div>
                <div class="item-box">
                  <div class="words">
                    {{ $t('home.customerPrice') }}{{ $t('home.yuan') }}
                  </div>
                  <div class="number">
                    {{ isTrueData(dataInfo.onePrice) }}
                  </div>
                  <div class="seq">
                    <span class="value">{{ dataInfo.yesterdayOnePriceRate >= 0 ? '+' : ''
                    }}{{ dataFormat(isTrueData(dataInfo.yesterdayOnePriceRate)) }}%</span>
                    <span class="compare grap">{{ $t('home.sameAsYesterday') }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /数据统计 -->
      </div>
    </div>
    <!-- /实时概况板块 End -->

    <!-- 整体看板 -->
    <div class="whole-plate">
      <div class="related-income">
        <div class="title">
          <div class="t-title">
            {{ $t('home.displays') }}
          </div>
          <span class="title-time">{{ $t('home.updateTime') }}：{{ nowDate }}
            <span>{{ nowTime }}</span></span>
          <div class="t-explain-item t-explain-first-item t-small-text t-today-data">
            {{ $t('home.platformPay') }}
          </div>
        </div>
        <div class="money">
          <!-- 当天支付金额 -->
          <div class="related-income-item">
            <p class="item-tit">
              {{ $t('home.dayAmount') }}
            </p>
            <p class="item-num">
              <span class="item-num-price">{{ dataInfo.payActualTotal }}</span>
            </p>
          </div>
          <!-- 本月完成金额 -->
          <div class="related-income-item">
            <p class="item-tit">
              {{ $t('home.monthAmount') }}
            </p>
            <p class="item-num">
              <span class="item-num-price">{{ sumPayActualTotal }}</span>
            </p>
          </div>
        </div>
      </div>
      <!-- 图表 -->
      <common-chart
        v-if="entiretyDataChart.show"
        :options="entiretyDataChart.options"
        style="width: 100%; height: 300px"
      />

      <!-- /图表 -->
    </div>
    <!-- /整体看板 End -->

    <!-- 退款看板 -->
    <div class="refund-plate">
      <div class="ranking-box">
        <div class="ranking-left">
          <div class="ranking-title">
            {{ $t('home.refundReasonRank') }}
          </div>
          <table
            class="table"
            cellpadding="0"
            cellspacing="0"
          >
            <tr class="table-tit gray">
              <td class="table-tit-item ranks padLeft">
                {{ $t('home.rank') }}
              </td>
              <td class="table-tit-item prods">
                {{ $t('home.reason') }}
              </td>
              <td class="table-tit-item refs">
                {{ $t('home.refundAmount') }}
              </td>
              <td class="table-tit-item prop">
                {{ $t('home.moneyRatio') }}
              </td>
            </tr>
            <tr
              v-for="(item, index) in refundRankForCause"
              :key="index"
              class="table-tit"
            >
              <td class="padLeft">
                {{ item[0] }}
              </td>
              <td>{{ item[1] }}</td>
              <td>{{ item[3] }}</td>
              <td>{{ item[4] }}%</td>
            </tr>
          </table>
          <div
            v-if="!refundRankForCause || !refundRankForCause.length"
            class="table-no-data"
          >
            暂无数据
          </div>
        </div>
        <!-- 退款率 -->
        <div class="refund-rate-box">
          <div class="refund-chart-msg">
            <div class="msg-tit-txt">
              <p class="msg-tit">
                {{ $t('home.refundRateToday') }}
                <span class="refund-explain">
                  {{ $t('home.refundRate') }}
                </span>
              </p>
            </div>
          </div>
          <!-- 图表 -->
          <common-chart
            v-if="refPerChart.show"
            :options="refPerChart.options"
            style="width: 100%; height: 450px"
          />
        </div>
      </div>

      <!-- 下 -->
      <div class="refund-chart-box">
        <div class="ranking-right">
          <div class="ranking-title">
            {{ $t('home.refundProRank') }}
          </div>
          <table class="table table-con">
            <tr class="table-tit gray">
              <td class="table-tit-item rank padLeft">
                {{ $t('home.rank') }}
              </td>
              <td class="table-tit-item prod">
                {{ $t('home.product') }}
              </td>
              <td
                class="table-tit-item ref"
              >
                {{ $t('home.refundCounts') }}
              </td>
            </tr>
            <tr
              v-for="(item, index) in refundRankForActualTotal"
              :key="index"
            >
              <td class="padLeft">
                {{ item[0] }}
              </td>
              <td class="line-clamp-one">
                {{ item[1] }}
              </td>
              <td>
                {{ item[2] }}
              </td>
            </tr>
          </table>
          <div
            v-if="!refundRankForActualTotal || !refundRankForActualTotal.length"
            class="table-no-data"
          >
            暂无数据
          </div>
        </div>
        <!-- 成功退款金额（元） -->
        <div class="successed-refund">
          <div class="refund-chart-msg">
            <div class="msg-tit-txt">
              <p class="msg-tit">
                {{ $t('home.successfulRefundAmountToday') }}
                <span class="refund-explain successful">
                  {{ $t('dataAnaly.successfulRefundAmount') }}
                </span>
              </p>
            </div>
          </div>
          <!-- 图表 -->
          <common-chart
            v-if="refundChart.show"
            class="refund-chart"
            :options="refundChart.options"
            style="width: 100%; height: 450px"
          />
          <!--/ 图表 -->
        </div>
      </div>
    </div>
    <!-- /退款看板 -->
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
const router = useRouter()
const sumPayActualTotal = ref(0.0)
let dataForm = {}
const commonStore = useCommonStore()
const routeList = commonStore.routeList
// 实时数据的x轴数据
const realTimeDataXAxis = [
  '0:00',
  '1:00',
  '2:00',
  '3:00',
  '4:00',
  '5:00',
  '6:00',
  '7:00',
  '8:00',
  '9:00',
  '10:00',
  '11:00',
  '12:00',
  '13:00',
  '14:00',
  '15:00',
  '16:00',
  '17:00',
  '18:00',
  '19:00',
  '20:00',
  '21:00',
  '22:00',
  '23:00'
]
let dataArray = []
let timeArray = []
const dataInfo = ref({})
const rate = []
const nowDate = ref(null)
const nowTime = ref(null)
const refundRankForActualTotal = ref([])
const refundRankForCause = ref([])
const orderStateCount = ref({})
const stockWarningCount = ref({})

onMounted(() => {
  getpayActualTotalByDay()
  getpayActualTotalByHour()
  getOrderRefundDayByTime()
  getOrderCount()
  getStockWarningCount()
  getRefundRankingByProd()
  getRefundRankingByReason()
  getpayInfo()
})

function isTrueData (data) {
  if (data) {
    return data
  }
  return 0
}

function toOrderPage (sts) {
  if (routeList.map(x => x.url).indexOf('order/order-manage/order/index') > -1) {
    router.push({
      path: '/order/order-manage/order/index',
      query: { status: sts }
    })
  } else {
    ElMessage.info($t('home.noPermissionAccessPage'))
  }
}

function toStockPage () {
  if (routeList.map(x => x.url).indexOf('prod/prod/index') > -1) {
    router.push({
      path: '/prod/prod/index',
      query: {
        isStockWarning: 1
      }
    })
  } else {
    ElMessage.info($t('home.noPermissionAccessPage'))
  }
}

function toRefundOrderPage () {
  if (routeList.map(x => x.url).indexOf('order/order-manage/refund/index') > -1) {
    router.push({
      path: '/order/order-manage/refund/index',
      query: {
        returnMoneySts: 1
      }
    })
  } else {
    ElMessage.info($t('home.noPermissionAccessPage'))
  }
}

function getStockWarningCount () {
  http({
    url: http.adornUrl('/prod/prod/stockWarningCount'),
    method: 'get'
  }).then(({ data }) => {
    stockWarningCount.value = data
  })
}

function getOrderCount () {
  http({
    url: http.adornUrl('/admin/statisticsOrder/orderCount'),
    method: 'get'
  }).then(({ data }) => {
    orderStateCount.value = data
  })
}
const realTimeDataChart = reactive({
  options: {},
  show: false
})
function getRealTimeDataChart () {
  const date = new Date()
  const seperator1 = '-'
  const year = date.getFullYear()
  let month = date.getMonth() + 1
  let strDate = date.getDate()
  const hours = date.getHours() // 获取当前小时数(0-23)
  const minutes = date.getMinutes() // 获取当前分钟数(0-59)
  const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds() // 获取当前秒数(0-59)
  if (month >= 1 && month <= 9) {
    month = '0' + month
  }
  if (strDate >= 0 && strDate <= 9) {
    strDate = '0' + strDate
  }
  nowDate.value = year + seperator1 + month + seperator1 + strDate
  nowTime.value = hours + ':' + minutes + ':' + seconds
  realTimeDataChart.options = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#fff',
      padding: 8,
      textStyle: {
        // 提示框浮层的文本样式。
        fontSize: '12px',
        fontWeight: 400,
        color: '#33333',
        opacity: 1
      },
      extraCssText: 'box-shadow:0px 1px 11px rgba(213, 220, 226, 0.73);',
      formatter: function (params) {
        let html = ''
        for (const i in params) {
          const param = params[i]
          // echarts日期格式化api
          const date = param.name
          html += `<span style="color: #999999">${
            param.seriesIndex === 0 ? date : ''
          }</span><br /><div style="margin-top:${
            param.seriesIndex === 0 ? '12px' : '0'
          };display: flex;align-items: center;"><i style="display: inline-block;width: 6px;height: 6px;background-color: ${
            param.seriesIndex === 0 ? '#0058FF' : '#21D59B'
          };margin-right: 9px;border-radius: 50%;"></i><span style=" display:inline-block;">${
            param.seriesName
          }：${param.value}</span></div>`
        }
        return html
      }
    },
    grid: {
      left: 20,
      right: 20,
      top: 55,
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {
          show: false
        }
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      symbol: 'none',
      data: realTimeDataXAxis,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#E0E6F1'],
          width: 1,
          type: 'solid'
        }
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: $t('home.dataTodayActualTotal'),
        symbol: 'none',
        type: 'line',
        smooth: true,
        lineStyle: {
          color: '#1890FF'
        },
        areaStyle: {
          colorType: 'LinearGradient',
          colorOption: {
            direction: [0, 0, 0, 1],
            color: [
              { offset: 0, color: 'rgba(0, 88, 255, 0.2)' },
              { offset: 1, color: 'rgba(255, 255, 255, 0)' }
            ]
          }
        },
        data: dataForm.nowActualTotal
      },
      {
        name: $t('home.dataYesterdayActualTotal'),
        type: 'line',
        smooth: true,
        lineStyle: {
          color: '#21D59B'
        },
        areaStyle: {
          colorType: 'LinearGradient',
          colorOption: {
            direction: [0, 0, 0, 1],
            color: [
              { offset: 0, color: 'rgba(41, 203, 151, 0.2)' },
              { offset: 1, color: 'rgba(41, 203, 151, 0.2)' }
            ]
          }
        },
        data: dataForm.payYesterdayActualTotal
      }
    ]
  }
  realTimeDataChart.show = true
}

// 整体看板图表
const entiretyDataChart = reactive({
  options: {},
  show: false
})
// 是否显示 整体看板图表 标题(用于提示暂无数据)
const isShowEntiretyChatTitle = ref(false)
function getEntiretyDataChart () {
  isShowEntiretyChatTitle.value = (!dataArray || !dataArray.length) && (!timeArray || !timeArray.length)
  entiretyDataChart.options = {
    title: {
      show: isShowEntiretyChatTitle.value,
      text: '暂无数据',
      textStyle: {
        color: '#909399',
        fontSize: 16,
        fontWeight: 400
      },
      left: 'center',
      top: 'center'
    },
    color: ['red'],
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#fff',
      padding: 8,
      textStyle: {
        // 提示框浮层的文本样式。
        fontSize: '12px',
        fontWeight: 400,
        color: '#33333',
        opacity: 1
      },
      extraCssText: 'box-shadow:0px 1px 11px rgba(213, 220, 226, 0.73);width:180px;height:62px',
      formatter: function (params) {
        let html = ''
        for (const i in params) {
          const param = params[i]
          const date = param.name
          html += `<span style="color: #999999">${date}</span><br /><div style="margin-top: 12px;display: flex;align-items: center;"><i style="display: inline-block;width: 6px;height: 6px;background-color: #0058FF;margin-right: 9px;border-radius: 50%;"></i><span style=" display:inline-block;">${param.seriesName}：${param.data}</span></div>`
        }
        return html
      },
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: 20,
      right: 20,
      width: '95%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        showMaxLabel: true
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      data: timeArray
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#E0E6F1'],
          width: 1,
          type: 'solid'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: $t('home.platformPay'),
        type: 'bar',
        itemStyle: {
          color: '#e8f0ff',
          borderRadius: [15, 15, 0, 0]
        },
        emphasis: {
          itemStyle: {
            color: '#1890FF'
          }
        },
        barWidth: 20,
        data: dataArray
      }
    ]
  }
  entiretyDataChart.show = true
}

function getpayActualTotalByHour () {
  http({
    url: http.adornUrl('/admin/statisticsOrder/getActualTotalByHour'),
    method: 'get'
  }).then(({ data }) => {
    if (data) {
      dataForm = data
      getRealTimeDataChart()
    }
  })
}

function getpayActualTotalByDay () {
  http({
    url: http.adornUrl('/admin/statisticsOrder/getActualTotalByDay'),
    method: 'get'
  }).then(({ data }) => {
    if (data) {
      dataArray = data
      dataForm = data
      timeArray = []
      dataArray = []
      for (let j = 0, len = dataForm.length; j < len; j++) {
        timeArray.push(dataForm[j].dates)
        dataArray.push(dataForm[j].payActualTotal)
        if (j === len - 1) {
          sumPayActualTotal.value = dataForm[j].onePrice
        }
      }
      getEntiretyDataChart()
    }
  })
}

function getOrderRefundDayByTime () {
  http({
    url: http.adornUrl('/admin/statisticsOrder/getOrderRefundDayByTime'),
    method: 'get'
  }).then(({ data }) => {
    if (data) {
      dataForm = data
      timeArray = []
      dataArray = []
      for (let j = 0, len = dataForm.length; j < len; j++) {
        timeArray.push(dataForm[j].refundDateToString)
        dataArray.push(dataForm[j].payActualTotal)
        rate.push(dataForm[j].refundRate)
      }
      getRefSumEchartData()
      getRefPerEchartData()
    }
  })
}

function getpayInfo () {
  http({
    url: http.adornUrl('/admin/statisticsOrder/orderPayByShopId'),
    method: 'get'
  }).then(({ data }) => {
    if (data) {
      dataInfo.value = data
    }
  })
}

function getRefundRankingByProd () {
  http({
    url: http.adornUrl('/admin/statisticsOrder/getRefundRankingByProd'),
    method: 'get'
  }).then(({ data }) => {
    if (data) {
      dataForm = data
      for (let j = 0, len = dataForm.length; j < len; j++) {
        const refund = []
        refund.push(j + 1)
        refund.push(dataForm[j].refundProdName)
        refund.push(dataForm[j].refundCount)
        refundRankForActualTotal.value.push(refund)
      }
    }
  })
}

function getRefundRankingByReason () {
  http({
    url: http.adornUrl('/admin/statisticsOrder/getRefundRankingByReason'),
    method: 'get'
  }).then(({ data }) => {
    if (data) {
      dataForm = data
      for (let j = 0, len = dataForm.length; j < len; j++) {
        const refund = []
        refund.push(j + 1)
        refund.push(dataForm[j].buyerReason)
        refund.push(dataForm[j].refundCount)
        refund.push(dataForm[j].payActualTotal)
        refund.push(dataForm[j].refundRate)
        refundRankForCause.value.push(refund)
      }
    }
  })
}
// 成功退款金额图表
const refundChart = reactive({
  options: {},
  show: false
})
// 是否显示 成功退款金额图表 标题(用于提示暂无数据)
const isShowRefChartTitle = ref(false)
function getRefSumEchartData () {
  isShowRefChartTitle.value = (!dataArray || !dataArray.length) && (!timeArray || !timeArray.length)
  refundChart.options = {
    title: {
      show: isShowRefChartTitle.value,
      text: '暂无数据',
      textStyle: {
        color: '#909399',
        fontSize: 16,
        fontWeight: 400
      },
      left: 'center',
      top: 'center'
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#fff',
      padding: 8,
      textStyle: {
        // 提示框浮层的文本样式。
        fontSize: '12px',
        fontWeight: 400,
        color: '#33333',
        opacity: 1
      },
      extraCssText: 'box-shadow:0px 1px 11px rgba(213, 220, 226, 0.73);width:180px;height:62px',
      formatter: function (params) {
        let html = ''
        for (const i in params) {
          const param = params[i]
          // echarts日期格式化api
          const date = param.name
          html += `<span style="color: #999999">${date}</span><br /><div style="margin-top: 12px;display: flex;align-items: center;"><i style="display: inline-block;width: 6px;height: 6px;background-color: #29CB97;margin-right: 9px;border-radius: 50%;"></i><span style=" display:inline-block;">${param.seriesName}：${param.data}</span></div>`
        }
        return html
      }
    },
    grid: {
      left: 20,
      right: 20,
      top: 55,
      // width: '93%',
      width: '91%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {
          show: false
        }
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: timeArray,
      nameTextStyle: {
        color: 'red'
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#E0E6F1'],
          width: 1,
          type: 'solid'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: $t('order.refundAmount'),
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#29CB97'
        },
        areaStyle: {
          colorType: 'LinearGradient',
          colorOption: {
            direction: [0, 0, 0, 1],
            color: [
              { offset: 0, color: 'rgba(41, 203, 151, 0.2)' },
              { offset: 1, color: 'rgba(255, 255, 255, 0.11)' }
            ]
          }
        },
        data: dataArray
      }
    ]
  }
  setTimeout(() => {
    refundChart.show = true
  }, 100)
}

// 退款率图表
const refPerChart = reactive({
  options: {},
  show: false
})
// 是否显示 退款率图表 标题(用于提示暂无数据)
const isShowRefPerChartTitle = ref(false)
function getRefPerEchartData () {
  isShowRefPerChartTitle.value = (!rate || !rate.length) && (!timeArray || !timeArray.length)
  refPerChart.options = {
    title: {
      show: isShowRefPerChartTitle.value,
      text: '暂无数据',
      textStyle: {
        color: '#909399',
        fontSize: 16,
        fontWeight: 400
      },
      left: 'center',
      top: 'center'
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#fff',
      padding: 8,
      textStyle: {
        // 提示框浮层的文本样式。
        fontSize: '12px',
        fontWeight: 400,
        color: '#33333',
        opacity: 1
      },
      extraCssText: 'box-shadow:0px 1px 11px rgba(213, 220, 226, 0.73);width:180px;height:62px',
      formatter: function (params) {
        let html = ''
        for (const i in params) {
          const param = params[i]
          // echarts日期格式化api
          const date = param.name
          html += `<span style="color: #999999">${date}</span><br /><div style="margin-top: 12px;display: flex;align-items: center;"><i style="display: inline-block;width: 6px;height: 6px;background-color: #0058FF;margin-right: 9px;border-radius: 50%;"></i><span style=" display:inline-block;">${param.seriesName}：${param.data}%</span></div>`
        }
        return html
      }
    },
    grid: {
      left: 20,
      right: 20,
      top: 55,
      width: '91%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {
          show: false
        }
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: timeArray,
      lineStyle: {
        color: 'red'
      },
      nameTextStyle: {
        color: 'red'
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#E0E6F1'],
          width: 1,
          type: 'solid'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: $t('home.reboundRate'),
        type: 'line',
        smooth: true,
        lineStyle: {
          color: '#1890FF'
        },
        areaStyle: {
          colorType: 'LinearGradient',
          colorOption: {
            direction: [0, 0, 0, 1],
            color: [
              { offset: 0, color: 'rgba(0, 88, 255, 0.1)' },
              { offset: 1, color: 'rgba(255, 255, 255, 0)' }
            ]
          }
        },
        data: rate
      }
    ]
  }
  setTimeout(() => {
    refPerChart.show = true
  }, 100)
}

function dataFormat (value) {
  return (value * 100).toFixed(2).valueOf()
}
</script>

<style lang="scss" scoped>
@use './home.scss';
</style>
